import { BuildInfo } from "../dom/BuildInfo"
import { EdgesLine } from "../effect/EdgesLine"
import { Fire } from "../effect/Fire"
import { FireBall } from "../effect/FireBall"
import { River } from "../effect/River"
import { modifyCityDefaultMaterial } from "../shader/modifyCityMaterial"
import { ClickHandler } from "../utils/ClickHandler"
import { EffectManager } from "../utils/EffectManager"
import { BaseModel } from "./BaseModel"
import { getObjectBounds } from '@/utils/getObjectBounds'
import * as THREE from 'three'
// 城市类
export class City extends BaseModel {
  init() {
    this.buildNameObj = { // 模型名字和建筑显示名字对应关系
      '01-shanghaizhongxindasha': '上海中心大厦',
      "02-huanqiujinrongzhongxin": "环球金融中心",
      "03-jinmaodasha": "金茂大厦",
      "04-dongfangmingzhu": "东方明珠",
    }

    this.lastOriginMat = []

    this.dataObj = {}

    this.scene.add(this.model)

    this.ininEffect()

    // this.initFire('01-shanghaizhongxindasha')

    this.bindClick()
  }
  // 修改城市的细节
  ininEffect() {
    this.model.traverse(model => {
      // 隐藏建筑上的牌子
      if (model.name === 'Text') {
        // 这里return出去 防止刻画牌子的外部线
        return model.visible = false
      }

      // 创建房屋的材质
      const centerMaterial = new THREE.MeshBasicMaterial({ color: 0xABCDED, transparent: true })
      const circumMaterial = new THREE.MeshBasicMaterial({ color: 0xABCDED, transparent: true })

      // 排除不需要修改的物体
      if (model.name !== 'Shanghai-08-River' && model.name !== 'Shanghai-09-Floor') {
        // 周围的建筑模型
        if (model.name === 'Shanghai-02' || model.name === 'Shanghai-03' || model.name === 'Shanghai-04' || model.name === 'Shanghai-05' || model.name === 'Shanghai-06' || model.name === 'Shanghai-07') {
          model.material = circumMaterial
          // 刻画边线
          new EdgesLine(this.scene, model, new THREE.Color('#666666'))
          modifyCityDefaultMaterial(model, false)
        }
        // 中心的建筑 
        else {
          model.material = centerMaterial
          // 刻画边线
          new EdgesLine(this.scene, model, new THREE.Color('#00ffff'))
          modifyCityDefaultMaterial(model, true)

        }
      } else if (model.name === 'Shanghai-08-River') {
        // 河水
        model.visible = false // 将原本的水物体隐藏
        const riverModelObject = new River(model, this.scene) // 创建更加真实的水面效果图
        EffectManager.getInstance().addObj(riverModelObject)
      }
    })
  }

  // 创建火灾标记
  initFire(buildName) {
    const build = this.model.getObjectByName(buildName)
    const { center, size } = getObjectBounds(build)
    // 火灾标记
    const fireModelObject = new Fire(this.scene, center, size)
    // 火灾影响范围
    const fireBallModelObject = new FireBall(this.scene, center)

    EffectManager.getInstance().addObj(fireBallModelObject)
    setTimeout(() => {
      EffectManager.getInstance().removeObj(fireBallModelObject)
      fireModelObject.clear()
      fireBallModelObject.clear()
    }, 2000)
  }

  // 中心四个建筑绑定点击事件
  bindClick() {
    Object.keys(this.buildNameObj).forEach(key => {
      const build = this.model.getObjectByName(key)
      ClickHandler.getInstance().addMesh(build, object => {
        const { center } = getObjectBounds(object)
        new BuildInfo(this.scene, center, this.dataObj.buildingsIntroduce[object.name])
      })
    })
  }
}